<template>
  <div class="container">
    <el-row class="tac">
      <el-col class="tarBar" :xs="{span:4,offset:0}" :sm="{span:4,offset:0}">
        <el-button class="btnflag" type="primary" id="zhanbtn" @click="isCollapse=!isCollapse">
          <i class="el-icon-s-unfold"></i>
        </el-button>
        <el-menu
          :default-active="$route.path"
          router
          class="el-menu-vertical-demo"
          background-color="#F5F5F5"
          :collapse="isCollapse"
        >
          <el-menu-item index="/manage/managehome">
            <i class="el-icon-s-home"></i>
            <span slot="title">后台</span>
          </el-menu-item>
          <el-submenu index="/manage/list">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>报修管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manage/list/1">待受理</el-menu-item>
              <el-menu-item index="/manage/list/2">待维修</el-menu-item>
              <el-menu-item index="/manage/list/3">已完成</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item
            index="/manage/article"
            :class="[this.$route.path.indexOf('/manage/article')!==-1?'is-active':'']"
            v-if="this.$store.state.power>=2"
          >
            <i class="el-icon-edit-outline"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/manage/revisdata">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">资料修改</span>
          </el-menu-item>
          <el-submenu index="/manage/per" v-if="this.$store.state.power>2">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manage/per/1">人员管理</el-menu-item>
              <el-menu-item index="/manage/per/2">报表统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="" @click="this.leave">
            <i class="el-icon-user-solid"></i>
            <span slot="title">退出登录</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="{span:18,offset:1}" :sm="{span:19,offset:1}">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false // 展开为false
    };
  },
  beforeMount() {
    //首次进入时
    if (window.screen.width <= 768 || document.body.clientWidth <= 768) {
      this.isCollapse = true;
    } else {
      this.isCollapse = false;
    }
    //窗口大小改变自适应响应
    window.addEventListener("resize", () => {
      if (window.screen.width <= 768 || document.body.clientWidth <= 768) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    });
  },
  methods: {
    leave() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$store.commit("clean");
        this.$router.push({ path: "/login" }).catch(errot => {});
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 10px auto;
  .btnflag {
    display: none;
  }
  .el-menu-vertical-demo {
    overflow: hidden;
    height: 700px;
    .el-menu-item {
      min-width: 100px;
    }
    .is-active {
      background-color: rgb(230, 230, 230) !important;
    }
  }
  @media screen and (max-width: 768px) {
    .el-menu-vertical-demo {
      float: left;
      z-index: 99;
    }
    .btnflag {
      display: block;
    }
  }
  .el-icon-s-unfold {
    font-size: 30px;
  }
  #zhanbtn {
    width: 64px;
    padding: 10px;
    border-radius: 0;
  }
}
</style>